css学习day04

选择器

1. 属性选择器【过滤器】
   在已有选择器的基础上进行筛选

   selector[]
   input[type] 
   input[type=text] 
   input[type^=s] 
   input[type$=t] 
   input[type*=t]
   

2. 伪类选择器【过滤器】

   表示结构的

   :first-child
   :last-child
   :nth-child()
       number/2n+1/even、odd

   表示状态的

   :link
   :hover
   :active
   :visited
   :focus
   

3. 伪元素选择器【添加元素】
   selector::after

   将一个伪元素添加到selector选择到的元素里面的最后面
   
   ul.nav::after {
       content:"four";
       display:block;
       ...
   }
   
   <ul class="nav">
       <li>one</li>
       <li>two</li>
       <li>three</li>
       ::after
   </ul>

规则取值：

        关键字：
            位置 left right center top bottom medium
            取消    none
            ...
        颜色：
            十六进制    #ffffff #ededed,简写为#fff
            rgb函数    rgb(0,0,0)
            关键字
            渐变色     linear-gradient
        长度：
            绝对单位     px 
            相对单位 
                em     当前元素上的字体大小
                    font-size:12px 
                    1em = 12px
                    2em = 24px
                rem 当前html元素中设定的字体大小
                    html {
                        font-size:10px;
                    }

                    ul {
                        font-size:20px;
                    }
                    li {
                        height:2rem;     //20px
                    }
                % 百分比
                    border-radius:50%

    文本样式 (可以被继承)
        line-height
        text-align
        text-decoration
    字体样式 (可以被继承)
        color
        font-family     族
            '微软雅黑' ,'Microsoft YaHei','宋体'
            字体栈

            font-family:"微软雅黑","Microsoft YaHei",serif;

        font-size         大小
            网页默认字体为16px
            12px 10px
        font-weight     粗细
            bold
            thin
            bolder
            100~900 
        font-style     是否打开斜体
        line-height 

        font:
        速写，简写
        font: font-style font-weight font-size/line-height font-family

        font:normal bold 14px/1.5em "微软雅黑","Microsoft YaHei"

        网络字体
            奇葩字体，（字 -> icon）

---------------------------

1.标签选择器
2.id选择器
3.类选择器
4.普遍选择器

5.父子选择器

空格：后代选择器，后面所有的后代
  > ：子集选择器，后面的子代

6.兄弟选择器

  + ：选择的是紧跟着选择器的标签
  ~ ：选择的是选择器后面所有同级标签

7.组合选择器

  交集选择器：
  并级选择器：逗号相连接
  

8.属性选择器
[type = text]
[type$=t] 有type属性，并且值以t结尾
[type^=t] 有type属性，并且值以t开头
[type*=t] 有type属性，并且值中含有t
[class~=two] class中包含类名two的

9.伪类选择器
a.同级别的

p:first-child:
p:last-child:
p:only-child: 匹配属于父元素中唯一子元素的 p 元素
p:nth-child(n): 同级别中第一个子元素
p:nth-child(odd): 同级别中所有的奇数标签
p:nth-child(even): 同级别中所有的偶数标签

b.同类型（防止同级别中类型不同而难以选择）

p:first-of-type：同级别中同类型的第一个标签
p:last-of-type：同级别中同类型的最后一个标签
p:nth-of-type(n)：同级别中同类型的第n个标签

10.伪元素选择器

div::before{
  content:'aaa'
}

div::after{
  content:'aaa'
}

p::first-letter{
  选中第一个字符
}

div::first-line{
  选中一行
}

input::selection{
  选中被选择的
}

优先级

1.!important
2.若选择器权重相同，则就近
3.行内：1000
id选择器: 100
类选择器，属性选择器，伪类选择器：10
标签选择器，伪元素选择器：1